<script setup>

import {goService} from "../../tools/go";
const list = [
  {id:1,img:'src/static/img/indeximg/kjfs/用户头像.png',age:"999票",name:"1号选手"},
  {id:2,img:'src/static/img/indeximg/kjfs/用户头像.png',age:"999票",name:"2号选手"},
  {id:3,img:'src/static/img/indeximg/kjfs/用户头像.png',age:"999票",name:"3号选手"},
]
const list2 = [
  {id:4,img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg",name:'4号上传',age:"104票"},
  {id:5,img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg",name:'4号上传',age:"104票"},
  {id:6,img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg",name:'4号上传',age:"104票"},
  {id:7,img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg",name:'4号上传',age:"104票"},
  {id:8,img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg",name:'4号上传',age:"104票"},
]
</script>

<template>
  <!-- 标题 -->
  <view class="titli">
    <v-icon @click="goService()" class="icon" icon="mdi-chevron-left"></v-icon>
    <h3>选举投票</h3>
  </view>
  <ul class="nav">
    <li v-for="item in list">
      <img :src="item.img">
      <text>{{ item.name }}</text>
      <text>{{ item.age}}</text>
    </li>
  </ul>
<!-- nav -->
  <ul class="nav2 w">
    <li v-for="item in list2 ">
      <view>
        <text>{{ item.id }}</text>
        <img :src="item.img" alt="">
        <text>{{ item.name }}</text>
      </view>
      <text class="i">{{ item.age }}</text>
    </li>
  </ul>
</template>

<style scoped lang="scss">
@import "../../static/css/title/index.css";
//列表2
.nav2{
  li{
    .i{
      width: 49px;
    }
    view{
      img{
        width: 50px;
        height: 50px;
        margin: 0 10px;
      }
      width: 100%;
      display: flex;
      align-items: center;

    }
    padding: 10px;
    width: 100%;
    background: #FFFFFF;
    margin: 4px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  display: flex;
  flex-direction: column;
  position: relative;
  top: -99px;
}
//列表1
.nav{
  li:nth-child(1){
    width: 120px;
    margin-top: 10px;
    height: 190px;
  }
  li:nth-child(2){
    width: 165px;
    margin-top: -10px;
    height: 210px;
  }
  li:nth-child(3){
    width: 120px;
    margin-top: 20px;
    height: 180px;
  }
  li{
    border-radius: 4px 4px 0 0;
    margin: 0 2px;
    height: 200px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: #FFFFFF;
  }
  width: 95%;
  display: flex;
  justify-content: center;
  margin: 100px auto;
}

body{
  background: #FF702E;
}
</style>